$(function () {
    load();

    //enter
    $("#title").on("keyup", function (e) {
        if ($(this).val() === "") {
            alert("宁还木有输入内容哦~");
        } else {
            //判断enter键
            if (e.keyCode === 13) {
                //先读取本地存储原来的数据
                var local = getData();
                // console.log(local);
                //把新数据追加给local数组
                local.push({ title: $(this).val(), done: false });
                saveData(local);
                //页面渲染
                load();

                $(this).val("");
            }
        }
    });

    //删除操作
    $("ol,ul").on("click", "a", function () {
        //先获取数据
        var data = getData();
        // console.log(data);
        var index = $(this).attr("id");
        // console.log(index);
        //删除
        data.splice(index, 1);
        saveData(data);
        load();
    })
    //正在完成和进行
    $("ul,ol").on("click", "input", function () {
        //先读取本地数据
        var data = getData();
        //修改数据
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        //保存
        saveData(data);
        load();

    })
    //读取本地存储数据
    function getData() {
        var data = localStorage.getItem('todo');
        if (data !== null) {
            //本地存储是字符串形式的，要转化为对象
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    //保存本地存储
    function saveData(data) {
        localStorage.setItem("todo", JSON.stringify(data))
    }

    //页面渲染
    function load() {
        var data = getData();
        // console.log(data);
        //先清空
        $("ol,ul").empty();
        var doing = 0;
        var finish = 0;
        $.each(data, function (i, ele) {
            // console.log(ele);
            //添加判断条件
            if (ele.done) {
                $("ul").prepend("<li><input type = 'checkbox' checked='checked'> <p>" + ele.title + "</p> <a href='javascript:;' id=" + i + ">删除<a></li>");
                finish++;
            } else {
                $("ol").prepend("<li><input type = 'checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' id=" + i + ">删除<a></li>");
                doing++;
            }

        })
        $(".doing").text(doing);
        $(".finish").text(finish);
    }
})